<template>
  <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <!-- <Select v-model="condition.typeid" clearable placeholder="请选择商户类型" class="search-col" @on-change="change1" style="width:200px">
          <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select> -->
        <Select v-model="condition.areaid" clearable placeholder="请选择所属加盟店区域" class="search-col" @on-change="change2" style="width:200px">
          <Option v-for="item in areaList" :value="item.id" :key="item.id">{{ item.areaname }}</Option>
        </Select>
        <Input clearable placeholder="输入加盟店名称搜索" class="search-input" v-model="condition.name"/>
        <Input clearable placeholder="输入联系电话搜索" class="search-input" v-model="condition.tel"/>
        <Button class="search-btn" type="primary" @click="List">搜索</Button>
      </div>
      <div class="fr">
        <Button class="search-btn" type="primary" @click="vivisle=true;status=true">新增商户</Button>
      </div>
    </div>
    <tables ref="tables" editable :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="pageSize" @pageNum="pageNum"/>
    <Modal
        title="商户管理"
        v-model="vivisle"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset('tableItem')"
        class-name="vertical-center-modal">
        <Form ref="tableItem" :model="tableItem" :rules="ruleValidate" :label-width="80">
          <FormItem label="名称" prop="name">
            <Input v-model="tableItem.name" placeholder="请输入姓名"></Input>
          </FormItem>
          <FormItem label="头像" prop="logo">
            <div class="demo-upload-list"  v-if="tableItem.logo">
                <img :src="tableItem.logo">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(tableItem.logo)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                </div>
            </div>
            <Upload v-else
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                type="drag"
                action="http://59.110.234.118:9100/uploadImgs/upload?path=admin/other"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                </div>
            </Upload>
            <Modal title="图片查看" v-model="visibleImg">
                <img :src="tableItem.logo" v-if="visibleImg" style="width: 100%">
            </Modal>
          </FormItem>
          <FormItem label="店铺折扣" prop="ratio">
            <input type="number"
            @blur="intMth"
             v-model="tableItem.ratio" placeholder="店铺折扣比例限0-1，保留两位小数" class="numberInput"/>
          </FormItem>
          <FormItem label="联系电话" prop="tel">
            <Input v-model="tableItem.tel" placeholder="请输入联系电话"></Input>
          </FormItem>
          <!-- <FormItem label="类型" prop="typeid">
            <Select v-model="tableItem.typeid" clearable :label-in-value="true" placeholder="请选择类型" size="large" style="width:200px" @on-change="change01">
              <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem> -->
          <FormItem label="所属区域" prop="areaid">
            <Select v-model="tableItem.areaid" clearable :label-in-value="true" placeholder="请选择所属加盟店区域" size="large" style="width:200px" @on-change="change02">
                <Option v-for="item in areaList" :value="item.id" :key="item.id">{{ item.areaname }}</Option>
            </Select>
          </FormItem>
          <FormItem label="状态">
              <i-switch size="large" :value="status" @on-change="changestatus"/>
          </FormItem>
          <FormItem label="经营内容" prop="content">
            <Input type="textarea" v-model="tableItem.content" placeholder="请输入经营内容"></Input>
          </FormItem>
          <FormItem label="备注" prop="remark">
            <Input type="textarea" v-model="tableItem.remark" placeholder="请输入备注"></Input>
          </FormItem>
          <FormItem label="地址" prop="addr">
            <Input v-model="tableItem.addr" placeholder="请输入地址"></Input>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset('tableItem')">取消</Button>
        <Button type="primary" size="large" @click="Save('tableItem')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "_c/tables";
import { businessD, businessS, businessQ, businessL,typeB, areaB} from "@/api/data";
export default {
  name: "Account",
  components: {
    tables: Tables
  },
  data() {
    const headerUrl = (rule, value, callback) => {
      setTimeout(res=>{
        if (this.tableItem.logo&&this.tableItem.logo.length>0) {
          callback();
        } else {
          callback(new Error("头像不能为空"));
        }
      },1000)
    };
    const mobileVali = (rule, value, callback) => {
      var reg = /^0?(13[0-9]|15[012356789]|18[012346789]|14[57]|17[678]|170[059]|14[57]|166|19[89])[0-9]{8}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确手机号"));
      }
    };
    return {
      status: false,
      vivisle: false,
      // id
      itemId: "",
      visibleImg: false,
      // 详情
      tableItem: {
        typeid: '032a7790760241818c227ac67e3b7013'
      },
      // 条件
      condition: {
        typeid: '032a7790760241818c227ac67e3b7013',
        category: 1,
        pageNum: 1,
        pageSize: 10
      },
      typeList: [],
      areaList: [],
      // table表头
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          key: ""
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "头像",
          key: "logo",
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.logo
              },
              style: {
                width: '60px',
                height: '60px',
                margin: '10px 0',
              }
            });
          }
        },
        {
          title: "二维码",
          key: "qrcode",
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.qrcode?params.row.qrcode:''
              },
              style: {
                width: '60px',
                height: '60px',
                margin: '10px 0',
              }
            });
          }
        },
        {
          title: "店铺折扣",
          key: "ratio",
        },
        {
          title: "联系电话",
          key: "tel",
        },
        {
          title: "类型名称",
          key: "typename",
        },
        {
          title: "区域名称",
          key: "areaname",
        },
        {
          title: "地址",
          key: "addr",
        },
        {
          title: "状态",
          key: "status",
        },
        {
          title: '操作',
          key: 'handle',
          button: [
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px",
                      display: params.row.isTop==0 ? "inline-block" : 'none'
                    },
                    on: {
                      click: () => {
                        let obj = params.row
                        obj.isTop = 1
                        this.saveTop(obj)
                      }
                    }
                  },
                  "置顶"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px",
                      display: params.row.isTop==1 ? "inline-block" : 'none'
                    },
                    on: {
                      click: () => {
                        let obj = params.row
                        obj.isTop = 0
                        this.saveTop(obj)
                      }
                    }
                  },
                  "取消置顶"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        this.shuaxin({id:params.row.bid},params.index)
                      }
                    }
                  },
                  "刷新二维码"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                       marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        window.open(params.row.qrcode)
                      }
                    }
                  },
                  "下载二维码"
                )
              ];
            },
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        this.itemId = params.row.id;
                        var obj = params.row
                        for(var key in obj){
                          this.tableItem[key] = obj[key]
                        }
                        this.$set(this,'status',params.row.status=='启用' ? true : false)
                        this.Query(this.tableItem);
                      }
                    }
                  },
                  "编辑"
                )
              ];
            },
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      this.itemId = params.row.bid;
                      this.Delete();
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px",
                      marginBottom: "5px"
                      }
                    },
                    "删除"
                  )
                ]
              );
            }
          ]
        }
      ],
      // table数据
      tableData: [],
      // 分页数据
      page: {
        current: 1,
        total: 0,
        pageSize: 10
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ],
        logo: [{ required: true, validator: headerUrl, trigger: "change,blur" }],
        tel: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {validator: mobileVali, trigger: "blur"}
        ],
        addr: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur"
          }
        ],
        // typeid: [
        //   {
        //     required: true,
        //     message: "请选择相应类型",
        //     trigger: "change"
        //   }
        // ],
        areaid: [
          {
            required: true,
            message: "请选择所属区域",
            trigger: "change"
          }
        ],
        content: [
          {
            required: true,
            message: "内容不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.List();
    this.ListT();
    this.ListA();
  },
  methods: {
    intMth(event) {
        var regex = /^0\.?[0-9]{1,2}$/;
        if (this.tableItem.ratio!=0&&this.tableItem.ratio!=1&&!regex.test(this.tableItem.ratio)) {
            this.$Message.warning('店铺折扣比例限0-1，保留两位小数!');
            this.$set(this.tableItem,'ratio',0)
            event.target.value = 0
        }
    },
    changestatus (status1) {
        // this.$Message.info('开关状态：' + status1);
        this.$set(this,'status',status1)
        // this.$Message.info('------------' + this.status);
    },
    handleReset (name) {
      this.vivisle = false
      this.$refs[name].resetFields();
      this.$set(this,'tableItem',{
        // lid: ''
      })
      this.$set(this,'status',false)
    },
    pageSize(value) {
      this.condition.pageSize = value
      this.condition.pageNum = 1
      this.List()
    },
    pageNum(value) {
      this.condition.pageNum = value
      this.List()
    },
    handleView() {
      this.visibleImg = true;
    },
    handleRemove() {
      this.$set(this.tableItem,'logo','')
    },
    handleSuccess(res, file) {
      this.$set(this.tableItem,'logo',res.data)
      this.tableItem.logo = res.data;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: ""
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件超出2M范围"
      });
    },
    change1 (item) {
      if(item){
        this.condition.typeid = item
      }
    },
    change2 (item) {
      if(item){
        this.condition.areaid = item
      }
    },
    change01 (item) {
      if(item&&item.value) {
        this.tableItem.typeid = item.value
        this.tableItem.typename  = item.label
      }
    },
    change02 (item) {
      if(item&&item.value) {
        this.tableItem.areaid = item.value
        this.tableItem.areaname = item.label
      }
    },
    change03 (item) {
      if(item&&item.value) {
        this.tableItem.bid = item.value
        this.tableItem.bname = item.label
      }
    },
    change04 (item) {
      if(item&&item.value){
        this.tableItem.cstatus = item.value
      }
    },
    ListT() {
      var obj = {
        status: 1,
        category: 2
      }
      typeB(obj).then(res => {
        if (res.code==1) {
        this.typeList = res.data
        }
      });
    },
    ListA() {
      var obj = {
        status: 1,
        category: 1
      }
      areaB(obj).then(res => {
        if (res.code==1) {
        this.areaList = res.data
        }
      });
    },
    // 分页数据获取
    List() {
      businessL(this.condition).then(res => {
        if (res.code==1) {
        let { data, total } = res.data;
        data.forEach(ele => {
          ele.status = ele.status==0?'停用':'启用'
        });
        this.tableData = data;
        this.page.total = total;
        }
      });
    },
    Query() {
      this.vivisle = true
    },
    shuaxin(option,index) {
      businessQ(option).then(res => {
        if (res.code === 1) {
          this.List();
        }
      });
    },
    Delete() {
      businessD({ id: this.itemId }).then(res => {
        if (res.code === 1) {
          this.itemId = "";
          this.List();
        }
      });
    },
    saveTop(opt) {
      var obj = {}
      for (const key in opt) {
        obj[key] = opt[key];
      }
      obj.status = this.status == false ?0: 1
      obj.category = 1
      businessS(obj).then(res => {
        if (res.code === 1) {
          this.List();
        }
      });
    },
    // 保存
    Save(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = this.tableItem
          obj.status = this.status == true ? 1: 0
          obj.category = 1
          obj.ratio = obj.ratio ? obj.ratio : 0
          businessS(obj).then(res => {
            if (res.code === 1) {
              this.vivisle = false
              this.handleReset(name)
              this.List();
            }
          });
        }
      });
    }
  }
};
</script>
